<template>
    <div class="cmt_container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请发表你的评论（最多评论120个字）" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postCommit">发表评论</mt-button>
        <div class="cmt_list" v-for="(item,i) in comments" :key="item.add_time">
            <div class="cmt_item">
                <div class="comment_title">第{{i+1}}楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.time | dataFormat}}</div>
                <div class="comment_body">{{item.content==='undifed'?"此用户很懒，还没有发表评论":item.content}}</div>
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
    </div>
</template>

<script> 
import { Toast } from 'mint-ui';
export default{
    data(){
        return{
            comments:[],
            pageIndex:1,
            msg:""
        }
    },
    created(){
        this.getComments();
    },
    methods:{ 
        getMore(){
            this.id++;
            this.getComments();
        },
        postCommit(){
            if(this.msg.trim().length===0){
                return Toast("评论不能为空");
            }
            var cmt = {
                user_name:"匿名用户",
                add_time:Date.now(),
                content:this.msg.trim()
            }
            this.comments.unshift(cmt);
            this.msg="";
        },
        getComments(){
            this.$http.get("comments/"+this.id+".json").then(result=>{
                if(result.body.status===0){
                    this.comments = this.comments.concat(result.body.message);
                }else{
                    Toast("获取评论失败");
                }
            });
        }
    },
    props:["id"]
}
</script>
<style> 
    .cmt_container>h3{
        font-size: 18x;
        font-weight: 900;
    }
    .cmt_container>textarea{
        margin: 0px;
        height: 85px;
        font-size: 14px;
    } 
    .cmt_container>.cmt_list{
        margin: 5px 0;
    }
    .cmt_container .cmt_item>.comment_title{
        background-color: #ccc;
        line-height: 30px;
    }
    .cmt_container .cmt_item>.comment_body{ 
        line-height: 40px;
        text-indent: 2em;
    }
</style>

